<template>
    <div class="shangchuan">
        <div class="s-one">
            <div class="s-one-qq">
                <img src="../../assets/images/searchuuy (1).png" alt="" class="s-one-w">
                <input type="text" placeholder="请输入企业名称" class="s-one-qqq">
                <div class="s-one-t">
                    <div class="s-one-e"></div>
                    <div class="s-one-r">搜索</div>
                </div>
            </div>
        </div>
        <div class="s-two" v-for="(item, index) in ww" :key="index">
            <div class="s-two-qq">
                <div class="s-two-q"> </div>
                <div class="s-two-w">
                    <div class="s-two-e">{{ item.name }}</div>
                    <div class="s-two-r">

                        <!-- <div class="s-two-ee"
                            :class="{ 's-two-ee0': item.status === 0, 's-two-ee1': item.status === 1, 's-two-ee2': item.status === 2, }">
                            {{ item.ee }}
                        </div> -->
                        <!-- <div class="s-two-ee" :class="{'s-two-ee0': item.status === 0'}"
                            {{ rr[item.status] }}
                        </div> -->
                        <!-- <div class="s-two-ee" :class="{ 's-two-ee0':item.status === 0,'s-two-ee1':item.status === 1,'s-two-ee2':item.status === 2,}">
                            {{ name[item.status] }}
                        </div> -->
                        <div class="s-two-rr">{{ uname1 }}</div>
                    </div>
                </div>
            </div>
            <div class="s-two-aa">
                <div class="s-two-a">
                    <div class="s-two-s">企业总数</div>
                    <div class="s-two-ss">{{ item.qyzs }}</div>
                </div>
                <div class=" s-two-a ">
                    <div class="s-two-s">未分配</div>
                    <div class="s-two-ss">{{ item.wfp }}</div>
                </div>
            </div>
            <div class="s-two-aa">
                <div class="s-two-a">
                    <div class="s-two-s">已跟进</div>
                    <div class="s-two-ss">{{ item.ygj }}</div>
                </div>
                <div class=" s-two-a ">
                    <div class="s-two-s">营销成功</div>
                    <div class="s-two-ss">{{ item.yxcg }}</div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>

export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {

    },
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            uname1: '张三 2022-02-11创建',
            pasword: '1232313',
            ww: [],
            rr: {
                0: '公司名单',
                1: '部门名单',
                2: '个人名单',
            },
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() {
        const qq = this.getCoList()
        this.ww = qq.result

    },
    mounted() {

    },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        getCoList() {
            const data = {
                result: [
                    {
                        name: "高新技术企业",
                        qyzs: 208,
                        wfp: 28,
                        ygj: 12,
                        yxcg: 13,
                        status: 0,
                    },
                    {
                        name: "独角兽企业",
                        qyzs: 188,
                        wfp: 178,
                        ygj: 32,
                        yxcg: 23,
                        status: 1,
                    },
                    {
                        name: "瞪羚企业",
                        qyzs: 68,
                        wfp: 36,
                        ygj: 2,
                        yxcg: 3,
                        status: 2,
                    },
                ],
            };
            return data;
        },

    }
};
</script>
<style scoped lang="scss">
.shangchuan {
    width: 375px;
    height: 1200px;

    .s-one {
        height: 165px;
        width: 375px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('../../assets/images/dingbubeijing.png');
        overflow: hidden;

        .s-one-qq {
            height: 41px;
            background: #FFFFFF;
            border-radius: 6px;
            margin: 91px 13px 0 13px;
            display: flex;
            align-items: center;

            .s-one-w {
                height: 15px;
                width: 15px;
                margin-left: 15px;
            }

            .s-one-q {
                height: 15px;
                width: 15px;
                margin-left: 13px;
                border: 1px solid red;
            }

            .s-one-qqq {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #5F6269;
                margin-left: 8px;
            }

            .s-one-t {
                margin-left: auto;
                margin-right: 23px;
                display: flex;
                align-items: center;

                .s-one-e {
                    width: 1px;
                    height: 20px;
                    background: #C7C7C7;
                    margin-right: 18px;
                }
            }

        }

    }

    .s-two {
        height: 179px;
        background: #FFFFFF;
        box-shadow: 0px 0px 5px 0px rgba(0, 82, 206, 0.06);
        border-radius: 9px;
        margin: -22px 13px 10px 13px;
        overflow: hidden;

        .s-two-qq {
            margin: 17px 0 0 15px;
            display: flex;

            .s-two-q {
                width: 32px;
                height: 49px;
                border: 1px solid red;
            }

            .s-two-w {
                margin-left: 10px;
                font-size: 16px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #000000;
            }

            .s-two-r {
                display: flex;
                align-items: center;
                padding-top: 9px;

                .s-two-ee {
                    font-size: 12px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #FFFFFF;
                    width: 73px;
                    height: 19px;
                    background: #7EB993;
                    border-radius: 5px;
                    text-align: center;
                    line-height: 19px;
                }

                .s-two-ee0 {
                    background: #1d0a86;
                }

                .s-two-ee1 {
                    background: #e32939;
                }

                .s-two-ee2 {
                    background: #87c613;
                }


                .s-two-rr {
                    font-size: 13px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #5F6269;
                    margin-left: 10px;
                }
            }
        }

        .s-two-aa {
            display: flex;
            margin: 10px 0 0 16px;

            .s-two-a {
                width: 50%;

                .s-two-s {
                    font-size: 13px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #5F6269;
                }

                .s-two-ss {
                    font-size: 16px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #000000;

                }
            }
        }
    }

}
</style>